{include file='header'/}

<body>
<div class="subbody">
    <!--form表单-->
    <form class="layui-form" style="height: 100%;">


        <div class="ace_header">
            <span class="saveFile"><i class="iconfont icon-newshot"></i></i>保存</span>
            <span class="refreshs"><i class="iconfont icon-refresh" aria-hidden="true"></i>刷新</span>
            <span class="searchs"><i class="iconfont icon-search_light" aria-hidden="true"></i>搜索</span>
            <span class="replaces"><i class="iconfont icon-order" aria-hidden="true"></i>替换</span>
            <span class="fontSize"><i class="iconfont icon-write" aria-hidden="true"></i>字体</span>
            <span class="themes"><i class="iconfont icon-filter" aria-hidden="true"></i>主题</span>
            <span class="helps"><i class="iconfont icon-question" aria-hidden="true"></i>帮助</span>
        </div>
        <div class="" style="height: 100%;">
            <div id="editor" class="ace_editor" style="min-height:400px;height:92%;">{$code|raw}</div>
            <input type="hidden" name="dosubmit" id="dosubmit" value="1">
            <input type="hidden" name="filename" id="filename" value="{$filename}">
        </div>
    </form>
</div>
{include file='footer'/}
<script src="__LIB__ace-builds/src-min/ace.js" type="text/javascript" charset="utf-8"></script>
<script src="__LIB__ace-builds/src-min/ext-language_tools.js" type="text/javascript" charset="utf-8"></script>

<script>
    var layer_index =null;
    var height = $(window).height();
    $("#editor").css('height',height-35);
    var editor = ace.edit("editor");
    theme = "{$aceTheme}";//主题 eclipse/monokai
    language = "{$ext}";//程序语言
    switch (language) {
        case "md":
            language = "markdown";
            break;
        case "htaccess":
            language = "apache_conf";
            break;
        case "txt":
            language = "text";
            break;
    }
    editor.setTheme("ace/theme/"+theme);
    editor.session.setMode("ace/mode/"+language);
    editor.setFontSize({$fontSize});	//字体大小
    document.getElementById("editor").style.lineHeight="25px";//设置行高;
    editor.setReadOnly(false);//设置只读（true时只读，用于展示代码）
    //自动换行,设置为off关闭
    editor.setOption("wrap", "free");
    ace.require("ace/ext/language/tools");
    //以下部分是设置输入代码提示的
    editor.setOptions({
        enableBasicAutocompletion: true,
        enableSnippets: true,
        enableLiveAutocompletion: true,
        wrap: true,
    });
    editor.setHighlightActiveLine(true); //代码高亮
    editor.setHighlightGutterLine(true);
    editor.setHighlightSelectedWord(true);
    editor.setShowPrintMargin(true);
    editor.getSession().setUseWorker(false);
    editor.getSession().setUseWrapMode(true); //支持代码折叠
    editor.selection.getCursor(); //获取光标所在行或列
    editor.session.getLength(); //获取总行数
    editor.getSession().setUseSoftTabs(true);
    //editor.getValue()//获取内容
    //editor.setValue(editor.getValue());//设置内容
    editor.getSession().on('change', function(e) {
        if(e.id){
            console.log('更改了代码');
        }
    });
    //ctrl+s保存
    editor.commands.addCommands([{
        name: 'save', bindKey: {win: 'Ctrl-S',  mac: 'Command-S'},
        exec: function(editor) { save_file(this, 'ace'); }
    }]);

    // 状态
    $('.ace_header span').click(function (e) {
        var type =  $(this).attr('class'),editor_item =  ace.edit("editor");
        switch(type){
            case 'saveFile': //保存当时文件
                save_file();
                break;
            case 'refreshs': //刷新文件
                window.location.reload();
                break;
            // 搜索
            case 'searchs':
                editor_item.execCommand('find');
                break;
            // 替换
            case 'replaces':
                editor_item.execCommand('replace');
                break;
            // 字体
            case 'fontSize':
                layer_index=layer.open({
                    type:1,
                    offset:'0px;',
                    area:['400px', '130px'],
                    title:'设置编辑器字体大小',
                    shadeClose: true, //开启遮罩关闭
                    content:'<div class="layui-form-item" style="padding-top:20px;">\n' +
                        '            <div class="layui-inline" style="margin-left:58px;">\n' +
                        '                <input type="number" class="layui-input layui-input-inline fontSizeInput" value="{$fontSize}">\n' +
                        '            </div>\n' +
                        '            <div class="layui-inline">\n' +
                        '                <a href="javascript:;" class="layui-btn" onclick="_editor_save(\'fontSize\',$(\'.fontSizeInput\').val())">保存</a>\n' +
                        '            </div>\n' +
                        '        </div>'
                });
                break;
            //主题
            case 'themes':
                layer_index2=layer.open({
                    type:1,
                    offset:'0px;',
                    area:['400px', '180px'],
                    title:'设置编辑器主题',
                    shadeClose: true, //开启遮罩关闭
                    content:'<div class="layui-form-item" style="padding-top:20px;">\n' +
                        '            <div class="layui-inline" style="margin-left:58px;">\n' +
                        '                <select id="change_ace_themes" name="change_ace_themes" style="width:180px;height:35px;">\n' +
                        '                 <option value="tomorrow_night_bright" {if($aceTheme=="tomorrow_night_bright")}selected{/if}>tomorrow_night_bright</option>\n' +
                        '                 <option value="eclipse" {if($aceTheme=="eclipse")}selected{/if}>eclipse</option>\n' +
                        '                 <option value="monokai" {if($aceTheme=="monokai")}selected{/if}>monokai</option>\n' +
                        '                 <option value="tomorrow" {if($aceTheme=="tomorrow")}selected{/if}>tomorrow</option>\n' +
                        '                </select>\n' +
                        '            </div>\n' +
                        '        </div>'
                });
                $('#change_ace_themes').change(function(){
                    var theme_val = $("#change_ace_themes").val();
                    editor.setTheme("ace/theme/"+theme_val);
                    $.get("{:url('ace_editor_config')}",{
                        type:'setTheme',
                        text:theme_val
                    })
                });
                break;
            case 'helps':
                layer.open({
                    type:1,
                    area:['70%', '90%'],
                    title:'帮助',
                    shadeClose: true, //开启遮罩关闭
                    content:'<div class="helps_conter">\
							<div class="helps_left">\
								<div class="helps_item">常用快捷键:</div>\
								<div class="helps_box">\
									ctrl+s&nbsp;&nbsp;保存</br>\
									ctrl+a&nbsp;&nbsp;全选&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;ctrl+x&nbsp;&nbsp;剪切</br>\
									ctrl+c&nbsp;&nbsp;复制&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;ctrl+v&nbsp;&nbsp;粘贴</br>\
									ctrl+z&nbsp;&nbsp;撤销&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;ctrl+y&nbsp;&nbsp;反撤销</br>\
									ctrl+f&nbsp;&nbsp;查找&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;ctrl+h;&nbsp;替换</br>\
									win+alt+0&nbsp;&nbsp;折叠所有</br>\
									win+alt+shift+0&nbsp;&nbsp;展开所有</br>\
									esc&nbsp;&nbsp;[退出搜索,取消自动提示...]</br>\
									ctrl-shift-s&nbsp;&nbsp;预览</br>\
									ctrl-shift-e&nbsp;&nbsp;显示&关闭函数\
								</div>\
								<div class="helps_item">选择:</div>\
								<div class="helps_box">\
									鼠标框选——拖动</br>\
									shift+home/end/up/left/down/right</br>\
									shift+pageUp/PageDown&nbsp;&nbsp;上下翻页选中</br>\
									ctrl+shift+ home/end&nbsp;&nbsp;当前光标到头尾</br>\
									alt+鼠标拖动&nbsp;&nbsp;块选择</br>\
									ctrl+alt+g&nbsp;&nbsp;批量选中当前并进入多标签编辑</br>\
								</div>\
							</div>\
							<div class="helps_left">\
								<div class="helps_item">光标移动:</div>\
								<div class="helps_box">\
									home/end/up/left/down/right</br>\
									ctrl+home/end&nbsp;&nbsp;光标移动到文档首/尾</br>\
									ctrl+p&nbsp;&nbsp;跳转到匹配的标签</br>\
									pageUp/PageDown&nbsp;&nbsp;光标上下翻页</br>\
									alt+left/right&nbsp;&nbsp;光标移动到行首位</br>\
									shift+left/right&nbsp;&nbsp;光标移动到行首&尾</br>\
									ctrl+l&nbsp;&nbsp;跳转到指定行</br>\
									ctrl+alt+up/down&nbsp;&nbsp;上(下)增加光标</br>\
								</div>\
								<div class="helps_item">编辑:</div>\
								<div class="helps_box">\
									ctrl+/&nbsp;&nbsp;注释&取消注释&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;ctrl+alt+a&nbsp;&nbsp;左右对齐</br>\
									table&nbsp;&nbsp;tab对齐&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;shift+table&nbsp;&nbsp;整体前移table</br>\
									delete&nbsp;&nbsp;删除&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;ctrl+d&nbsp;&nbsp;删除整行</br>\
									ctrl+delete&nbsp;&nbsp;删除该行右侧单词</br>\
									ctrl/shift+backspace&nbsp;&nbsp;删除左侧单词</br>\
									alt+shift+up/down&nbsp;&nbsp;复制行并添加到上(下面)面</br>\
									alt+delete&nbsp;&nbsp;删除光标右侧内容</br>\
									alt+up/down&nbsp;&nbsp;当前行和上一行(下一行交换)</br>\
									ctrl+shift+d&nbsp;&nbsp;复制行并添加到下面</br>\
									ctrl+delete&nbsp;&nbsp;删除右侧单词</br>\
									ctrl+shift+u&nbsp;&nbsp;转换成小写</br>\
									ctrl+u&nbsp;&nbsp;选中内容转换成大写</br>\
								</div>\
							</div>\
						</div>'
                });
                break;
        }
    });

    function save_file() {
        $.post("{:url('file/edit')}",{
            dosubmit:1,
            text:$.base64.encode(editor.getValue()),
            filename:$("#filename").val(),
        },function (res) {
            if (res.code == 1) {
                layer.msg(res.msg,{icon:1});
            } else {
                layer.close(m);
                layer.msg(res.msg);
            }
        },'json');
    }

    function _editor_save(save_type,text) {
        if(!isNaN(text) && (Number(text)>11 && Number(text)<=30) ){
                editor.setFontSize(Number(text));
                $.get("{:url('ace_editor_config')}",{
                    type:save_type,
                    text:text
                },function (res) {
                    layer.close(layer_index);
                })
        }else{
            layer.msg('字体设置范围：12-30');
        }
    }
</script>
</body>
</html>